<template>
  <el-container>
    <el-header class="el-header">
      <!-- 发布信息按钮 -->
      <el-button
        type="primary"
        round
        class="publish"
        @click="dialogFormVisible = true"
        >发布</el-button
      >
      <div class="ConsultSearch">
        <el-input v-model="input" placeholder="搜索" class="inner"></el-input>
        <div><el-button type="primary" @click="search">搜索</el-button></div>
      </div>
    </el-header>
    <el-main>
      <!-- 点击发布会出现的弹窗 -->
      <div class="Publish-content">
        <div class="Publish-contents">
          <el-dialog title="资讯发布" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="资讯标题" :label-width="formLabelWidth">
                <el-input v-model="form.title" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="资讯id" :label-width="formLabelWidth">
                <el-input
                  v-model="form.publishId"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="资讯内容" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  :rows="15"
                  placeholder="请输入内容"
                  v-model="form.content"
                >
                </el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="dialogFormVisible = false"
                v-on:click="addAction"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
      </div>
      <!-- 编辑修改功能 -->
      <div class="Actionediting">
        <el-dialog title="资讯修改" :visible.sync="Actione">
          <el-form :model="form">
            <el-form-item label="资讯标题" :label-width="formLabelWidth">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="资讯id" :label-width="formLabelWidth">
              <el-input v-model="form.publishId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="资讯内容" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                :rows="15"
                placeholder="请输入内容"
                v-model="form.content"
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="Actione = false">取 消</el-button>
            <el-button
              type="primary"
              @click="Actione = false"
              v-on:click="resAction1"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>

      <!-- 帖子模块 -->
      <div class="Post-directory">
        <el-table
          :data="
            tableData.slice(
              pageSize * (currentPage - 1),
              pageSize * currentPage
            )
          "
          style="width: 100%"
          stripe
        >
          <el-table-column label="日期" width="180">
            <template slot-scope="scope">
              <i class="el-icon-tme"></i>
              <span style="margin-left: 10px">{{ scope.row.publishTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="资讯标题" width="450">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.title }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="资讯发布人" width="150">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.userName }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="评论/回复" width="150">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.comment }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <!-- 编辑删除 -->
          <!-- 修改按钮点击事件 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="Actione = true"
                v-on:click="resAction(scope.row)"
              >
                <i class="el-icon-edit"></i>
              </el-button>
              <el-button
                slot="reference"
                type="danger"
                @click="deleteList(scope.row.id)"
              >
                <i class="el-icon-delete"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 
      :total 总条目数
      :page-count	总页数
      page-size 一页显示几个选择器页数
     -->
        <el-pagination
          background
          :current-page="currentPage"
          layout="prev, pager, next"
          :total="tableData.length"
          :page-count="Math.ceil(tableData.length / pageSize)"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import {
  getListIn,
  deleteUser,
  informationsubmit,
  informationrevise,
} from "@/api/talk";
export default {
  data() {
    return {
      //修改的id
      updateId: "",
      //用户信息
      userMsg: "",
      userMsgId: "",
      // 搜索框
      tableData: [],
      textarea1: "",
      textarea2: "",
      input: "",
      //帖子发布弹出框
      dialogFormVisible: false,
      form: {
        publishId: "",
        title: "",
        content: "",
      },
      formLabelWidth: "120px",
      //   帖子发布名称
      textarea: "",

      // 分页器的属性
      pageSize: 10,
      // 当前页数
      currentPage: 1,
      /* 页码更改时的事件 */
      // 操作弹出的弹框
      Actione: false,
    };
  },
  created() {
    // axios({
    //   url: "/api/information/info",
    //   method: "GET",
    //   data:obj,
    //   headers:{
    //     token:"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOlsiMiIsIjIiXSwiZXhwIjoxNjYwMTA2ODU3fQ.pCS6FqBJ7R63WmrYHeaNXP7FeAsocpJqjn2HbCVRkuQ"
    //   }
    // });
    // 资讯获取
    this.getListIn();
    this.getUserMsg();
  },
  methods: {
    //删除资讯
    deleteList(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let obj = {
            id: id,
          };
          deleteUser(obj).then((res) => {
            this.getListIn();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 分页功能
    handleCurrentChange(val) {
      console.log(val);
      this.currentPage = val;
    },
    //搜索资讯
    search() {
      let obj = {
        search:this.input,
        limit:10,
        page:1
      };
      console.log(obj)
      getListIn(obj).then(res=>{
        console.log(res.data,"search")
        this.tableData = res.data
      })
    },
    //获取资讯
    getListIn() {
      let obj = {
        page: 20,
        limit: 20,
      };
      console.log(obj);
      getListIn(obj).then((res) => {
        console.log(res);
        let arr = res.data;
        this.tableData = arr;
        console.log(this.tableData);
      });
    },
    //获取用户信息
    async getUserMsg() {
      this.userMsg = await JSON.parse(localStorage.getItem("userMsg"));
      //  console.log(this.userMsg)
      this.userMsgId = this.userMsg.userId;
      console.log(this.userMsgId, "231234124");
    },
    //新增资讯
    addAction() {
      let obj = this.form;
      informationsubmit(obj).then((res) => {
        this.getListIn();
        console.log(res);
        this.$message({
          type: "success",
          message: "增加成功!",
        });
      });
    },
    // 修改资讯按钮点击
    resAction(value) {
      this.form = value;
      this.updateId = value.id;
    },
    //修改资讯
    resAction1() {
      let obj = {
        title: this.form.title,
        id: this.updateId,
        content: this.form.content,
        modifyId: "",
      };
      console.log(obj, "414124124");
      informationrevise(obj).then((res) => {
        this.getListIn();
        this.$message({
          type: "success",
          message: "修改成功!",
        });
      });
    },
    // 操作编辑功能
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style scoped>
.el-header {
  /* border: 1px solid red; */
  width: 100%;
  height: 300px;
  box-shadow: 2px 0px 3px black;
  display: flex;
  justify-content: space-between;
}
/* 发布信息按钮 */
.publish {
  margin-top: 6px;
  height: 50px;
  width: 100px;
}
/* 发布弹出框 */
.dialog-footer {
  height: 100%;
}
/* 咨询搜索框 */
.inner {
  width: 200px;
  margin: 12px;
  margin-right: 22px;
  border: 1px solid #409eff;
}
.Post-directory {
  height: 100%;
}
.Publish-contents {
  margin: 0 auto;
}
/* 帖子目录 */
.Post-directory-branch {
  display: flex;
}
/* 帖子题目分支 */
.Article-title-branch {
  font-weight: 600;
  margin-left: 200px;
}
/* 作者 */
.author-branch {
  font-weight: 600;
  margin-left: 100px;
}
/* 发布时间 */
.Publish-time-branch {
  font-weight: 600;
  margin-left: 100px;
}
.ConsultSearch {
  display: flex;
  align-items: center;
  margin-right: 150px;
}
</style>